<template>
    <scroll-view class="album_scroll_view" scroll-y @scrolltolower="handleToLower">
        <!-- 
            1 自动轮播 autoplay
            2 指示器 indicator-dots
            3 衔接轮播 circular

            4 swiper 默认高度150px
            5 swiper-item 默认宽高100%
            6 image 默认高度240px 默认宽度320px

         -->
        <!-- 轮播图开始 -->
        <view class="album_swiper">
            <swiper autoplay indicator-dots circular indicator-active-color="#fff">
                <swiper-item
                    v-for="item in banner"
                    :key="item.id"
                >
                    <image :src="item.thumb"></image>
                </swiper-item>
            </swiper>
        </view>
        <!-- 轮播图结束 -->

        <!-- 列表 开始 -->
        <view class="album_list">
            <navigator class="album_item"
                v-for="item in album"
                :key="item.id"
                :url="`/pages/album/index?id=${item.id}`"
            >
                <view class="album_img">
                    <image mode="aspectFill" :src="item.cover"></image>
                </view>
                <view class="album_info">
                    <view class="album_name">{{item.name}}</view>
                    <view class="album_desc">{{item.desc}}</view>
                    <view class="album_btn">
                        <view class="album_attention">关注</view>
                    </view>
                </view>
            </navigator>
        </view>
        <!-- 列表 结束 -->
    </scroll-view>
</template>

<script>
export default {
    data() {
        return {
            // 轮播图数组
            banner: [],
            // 专辑数组
            album: [],
            // 请求参数
            params: {
                limit: 30,
                order: "new",
                skip: 0
            },
            // 是否还有分页数据
            hasMore: true
        }
    },
    methods: {
        // 获取接口的数据
        getList() {
            this.request({
                url: "http://157.122.54.189:9088/image/v1/wallpaper/album",
                data: this.params
            })
            .then(result=>{
                console.log(result);
                if(this.banner.length===0) {
                    this.banner = result.data.res.banner;
                }
                if(result.data.res.album.length===0) {
                    this.hasMore = false
                    uni.showToast({
                        title: "没有更多数据了",
                        icon: "none"
                    })
                    return;
                }
                this.album = [...this.album, ...result.data.res.album];
            })
        },
        // 上拉加载-执行分页
        handleToLower() {
            if(this.hasMore) {
                this.params.skip+=this.params.limit;
                this.getList();
            }else {
                uni.showToast({
                    title: "没有数据了",
                    icon: "none"
                })
            }
        }
    },
    mounted() {
        // 修改页面的标题
        uni.setNavigationBarTitle({
          title: '专辑',
        })
        this.getList();
    }
}
</script>

<style lang="scss" scoped>
    .album_scroll_view{
        height: calc(100vh - 36rpx);
    }
    .album_swiper{
        swiper {
            // 2.3是接口图片的宽高比
            height: calc(750rpx / 2.3);
            image {
                height: 100%;
            }
        }
    }

    .album_list {
        padding: 10rpx;
        .album_item {
            padding: 10rpx 0;
            display: flex;
            border-bottom: 1px solid #ccc;
            .album_img {
                flex: 1;
                padding: 10rpx;
                image {
                    width: 220rpx;
                    height: 180rpx;
                }
            }
            .album_info {
                flex: 2;
                padding: 0 10rpx;
                overflow: hidden;
                .album_name {
                    font-size: 30rpx;
                    color: #000;
                    padding: 10rpx 0;
                }
                .album_desc {
                    padding: 10rpx 0;
                    font-size: 24rpx;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                .album_btn {
                    padding: 10rpx;
                    display: flex;
                    justify-content: flex-end;
                    .album_attention {
                        color: $color;
                        border: 1rpx solid $color;
                        padding: 10rpx;
                    }
                }
            }
        }
    }

</style>